<template>
  <div class="main">
    <div class="swiper">
      <swiper 
        class="swiper-wrap"
        indicator-dots="true"
        autoplay="true"
        interval="10000"
        duration="500"
        circular="true">
        <block :key="index" v-for="(img,index) in banner">
          <swiper-item>
            <image :src="img.image_url" mode="widthFix" class="slide-image"/>
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="channel">
      <div @click="thisCategory(icon)" :key="index" v-for="(icon, index) in channel">
        <img :src="icon.icon_url">
        <p>{{icon.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['banner', 'channel'],
  methods: {
    thisCategory (icon) {
      wx.navigateTo({
        url: `/pages/allGoods/main?id=${icon.id}&name=${icon.name}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.swiper{
  .swiper-wrap{
    height: 400rpx;
    image{
      width: 100%;
    }
  }
}
.channel{
  display: flex;
  padding: 20rpx 0;
  background: #ffffff;
  div {
    width: 25%;
    text-align: center;
    img {
      height: 58rpx;
      width: 58rpx;
      display: inline-block;
    }
  }
}
</style>
